<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="关键字" prop="keyWords">
            <el-input
                v-model="queryParams.keywords"
                placeholder="请输入关键字"
                clearable
                size="default"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="handleCurrentChange(1)">
              <el-icon>
                <ele-Search/>
              </el-icon>
              查询
            </el-button>
            <el-button size="default" type="success" class="ml10" @click="editWidget(null)">
              <el-icon>
                <ele-FolderAdd/>
              </el-icon>
              添加插件
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list-wrap">
        <div v-for="(item,index) in widgets" :key="'w'+index" class="widget-item">
          <CardWidget v-if="item.type == 'card'" :widget-id="item.id" :key="item.id" @click="editWidget(item)"/>
        </div>
      </div>
      <div class="list-pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <EditWidget ref="editWidgetRef" @callback="handleCurrentChange(1)"/>
  </div>
</template>

<script lang="ts">
import {toRefs, ref, reactive, defineComponent, onBeforeMount} from 'vue';
import CardWidget from "/@/components/widget/cardWidget.vue";
import {getWidgetPage} from "/@/api/system/widget";
import EditWidget from "/@/views/system/widget/component/editWidget.vue";
import {initSystemCardWidgets} from "/@/router/frontEnd";


export default defineComponent({
  name: 'systemUser',
  components: {CardWidget, EditWidget},
  setup() {
    const editWidgetRef = ref()
    const state = reactive({
      queryParams: {
        keywords: "",
        isbn: "",
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      widgets: [],
    });
    // 初始化表格数据
    onBeforeMount(() => {
      getList();
    });
    const getList = async () => {
      await initSystemCardWidgets();
      getWidgetPage(state.queryParams).then((res: any) => {
        state.widgets = res.data.list;
        state.total = res.data.total;
        state.queryParams.pageNum = res.data.pageNum;
        state.queryParams.pageSize = res.data.pageSize;
      });
    };

    const handleSizeChange = (_size: number) => {
      state.queryParams.pageNum = 1
      state.queryParams.pageSize = _size
      getList();
    };
    const handleCurrentChange = (_page: number) => {
      state.queryParams.pageNum = _page
      getList();
    };

    const editWidget = (_row: any) => {
      editWidgetRef.value.openDialog(_row)
    }
    return {
      editWidgetRef,
      handleSizeChange,
      handleCurrentChange,
      editWidget,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>
.list-wrap {
  margin-bottom: 20px;
  overflow: hidden;
  .widget-item{
    width: 280px;
    display: block;
    float: left;
    height: 130px;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

</style>
